<template>
    <div class="box">
        <div class="title">
            <h2>{{ title }}</h2>
            <img src="/src/assets/images/avatar.gif" alt="">
        </div>
        <div>
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps({
    title: {
        required: true,
        type: [String, Number]
    }
})
</script>

<style scoped lang="scss">
.box {
    box-shadow: 1px 2px 5px 2px rgba(128, 128, 128, 0.217);

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px;
        border-bottom: 1px dashed rgba(128, 128, 128, 0.217);

        h2 {
            padding: 0;
            margin: 0;
            font-size: 20px;
        }

        img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
    }
}
</style>